<template>
  <div class="home-view">
    <div class="header">
      <h1>欢迎来到子应用 A - 首页</h1>
      <p>这是子应用 A 的首页内容</p>
      <p><router-link to="/about">跳转about</router-link></p>
      <!-- 运行模式显示 -->
      <el-tag :type="isInMicroApp ? 'success' : 'info'" size="large">
        当前模式：{{ appMode }}
      </el-tag>
    </div>

    <div class="content">
      <el-card class="demo-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>示例组件</span>
          </div>
        </template>
        <div class="input-demo">
          <el-input
            v-model="msg"
            placeholder="请输入内容（测试缓存功能）"
            style="width: 300px"
            clearable
          />
          <p style="margin-top: 10px">您输入的内容：{{ msg }}</p>
          <div style="margin-top: 15px">
            <el-button @click="clearInput" type="danger" size="small">清空输入</el-button>
            <el-button @click="fillTestData" type="primary" size="small">填入测试数据</el-button>
          </div>
          <!-- <p style="margin-top: 10px; font-size: 12px; color: #999">
            组件创建时间：{{ componentCreateTime }}
          </p>
          <p style="font-size: 12px; color: #999">组件激活次数：{{ activatedCount }}</p> -->
        </div>
      </el-card>

      <el-card class="info-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>应用信息</span>
          </div>
        </template>
        <div class="info-content">
          <el-tag type="success">Vue 3</el-tag>
          <el-tag type="info">Element Plus</el-tag>
          <el-tag type="warning">TypeScript</el-tag>
          <el-tag type="danger">Vite</el-tag>
        </div>
      </el-card>

      <!-- 环境信息卡片 -->
      <el-card class="env-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <span>环境信息</span>
          </div>
        </template>
        <div class="env-content">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="运行模式">{{ appMode }}</el-descriptions-item>
            <el-descriptions-item label="是否在iframe中">{{
              isInIframe ? '是' : '否'
            }}</el-descriptions-item>
            <el-descriptions-item label="是否有主应用标识">{{
              hasMainAppFlag ? '是' : '否'
            }}</el-descriptions-item>
            <el-descriptions-item label="菜单显示状态">{{
              isInMicroApp ? '隐藏' : '显示'
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { isMicroApp, getAppMode } from '../utils/microApp'

const msg = ref('')

// 环境检测
const isInMicroApp = computed(() => isMicroApp())
const appMode = computed(() => getAppMode())
const isInIframe = computed(() => window.parent !== window)
const hasMainAppFlag = computed(() => {
  const urlParams = new URLSearchParams(window.location.search)
  return urlParams.get('from') === 'main-app'
})
const clearInput = () => {
  msg.value = ''
}
const fillTestData = () => {
  msg.value = '这是测试数据'
}
// 组件挂载时的调试信息
onMounted(() => {
  console.log('>>> HomeView 组件已挂载 <<<')
  console.log('当前页面URL:', window.location.href)
  console.log('当前时间:', new Date().toISOString())
})
</script>

<style scoped>
.home-view {
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h1 {
  color: #333;
  margin-bottom: 10px;
}

.header p {
  color: #666;
  font-size: 16px;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.demo-card,
.info-card {
  width: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
}

.input-demo {
  padding: 20px;
  text-align: center;
}

.info-content {
  padding: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 768px) {
  .content {
    padding: 0 10px;
  }
}
</style>
